<script setup lang="ts">
import {
  initWebSocket,
} from '@/utils/websocket';
import {
  listStudentTake,
  getStudentTake
} from '@/api/school/studentTake';

onMounted(() => {
  getList();
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket",getSocketMessage);
  // initWebSocket("ws://139.129.19.32:9300/resource/websocket", getSocketMessage);
});

function getSocketMessage(message: any) {
  console.log('getSocketMessage', message);
  if (message === '{"type":"ping"}') {
    console.log('正常心跳');
  } else {
    getById(JSON.parse(message).id);
    
  }
}

const msgList: any = ref([])

const getById = async (id:string) => {
  const res = await getStudentTake(id);
  console.log(res)
  console.log(res.data)
  console.log(res.data.id)
  msgList.value.push(res.data)
}
/** 查询通知学生拿东西列表 */
const getList = async () => {
  const res = await listStudentTake({
    pageNum: 1,
    pageSize: 999
  });
  msgList.value = res.rows
}
</script>

<template>
  <div class="screenPage">
    <div style="display: flex; justify-content: center;">
      <img src="../../assets/images/title.png" style="width: 500px; height: 80px;" />
    </div>
    <div class="screenBox">
      <div class="screenTitle">
        <div style="width: 15%; line-height: 48px; color: #fff;">姓名</div>
        <div style="width: 15%; line-height: 48px; color: #fff;">事项</div>
        <div style="width: 50%; line-height: 48px; color: #fff;">留言</div>
        <div style="width: 20%; line-height: 48px; color: #fff;">预约时间</div>
      </div>
      <div class="msgBox">
        <div v-for="(item, index) in msgList" :key="index">
          <div class="msgItem" :style="index % 2 === 0 ? 'background: #F3F7FF;' : ''">
            <div style="width: 15%; line-height: 60px; color: #D63131;">{{item.studentName}}</div>
            <div style="width: 15%; line-height: 60px; color: #0279D1;">{{item.relationTypeName}}</div>
            <div style="width: 50%; line-height: 60px;">{{item.remark}}</div>
            <div style="width: 20%; line-height: 60px; color: #666666;">{{item.appointmentTime}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.screenPage {
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  background-image: url('../../assets/images/bg.png');
}
.screenBox {
  overflow-x: hidden;
  width: 100%;
  border-radius: 20px;
  background: #FFFFFF;
  border: 3px solid #2197EE;
}
.screenTitle {
  padding: 0 40px;
  width: 100%;
  height: 48px;
  background: #1455CD;
  display: flex;
}
.msgBox {
  height: calc(100vh - 156px);
  overflow-y: auto;
  scrollbar-width: none;
}
.msgItem {
  padding: 0 40px;
  width: 100%;
  height: 60px;
  display: flex;
}
</style>
